<!--
 * @Description: 设置策略
 * @Author: 0001100986/LiuShuai
 * @Date: 2020-11-18 15:47:15
 * @LastEditTime: 2021-11-11 16:17:43
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="dialogbg" v-show="dialogStr">
    <div class="dialogbox">
      <div class="boxmain">
        <div class="box-title">
          策略设置
          <label @click="cancel">
            <i class="el-icon-close"></i>
          </label>
        </div>
        <div class="box-content">
          <el-table border :data="samgrList" class="str_table">
            <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
            <el-table-column prop="userlabel" label="标题" min-width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.userlabel"
                  placeholder="请输入"
                  :key="'userlabel' + scope.$index"
                  maxlength="10"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type">
                  <el-option label="丢包率" value="loss"></el-option>
                  <el-option label="时延" value="latency"></el-option>
                  <el-option label="抖动" value="jitter"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="参数" width="150">
              <template slot-scope="scope">
                <template v-if="scope.row.type === 'loss'">
                  <el-input
                    v-model="scope.row.size"
                    placeholder="1-80"
                    :key="'loss' + scope.$index"
                    maxlength="2"
                  >
                    <span slot="append">%</span>
                  </el-input>
                </template>
                <template v-if="scope.row.type === 'latency'">
                  <el-input
                    v-model="scope.row.size"
                    placeholder="1-400"
                    :key="'latency' + scope.$index"
                    maxlength="3"
                  >
                    <span slot="append">ms</span>
                  </el-input>
                </template>
                <template v-if="scope.row.type === 'jitter'">
                  <el-input
                    v-model="scope.row.size"
                    placeholder="1-100"
                    :key="'jitter' + scope.$index"
                    maxlength="3"
                  >
                    <span slot="append">ms</span>
                  </el-input>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="110" align="center">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.$index, scope.row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button v-show="addsub" @click="addClick">添加一行</el-button>
        </div>
        <div class="box-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="subSlot">确认</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'str',
  props: ['dialogStr', 'samgrList', 'tunnelInfo'],
  data () {
    return {
      valNumer: 0
    };
  },
  mounted () {
    // 监听键盘按键事件
    let _this = this;
    _this.$nextTick(() => {
      document.addEventListener('keyup', (e) => {
        // 监听ESC按钮
        if (e.keyCode === 27) {
          _this.$emit('changeStr', false);
        }
      });
    });
  },
  // 监听值
  watch: {
    // 弹出框表单参数赋值
    dialogStr (val) {
      let _this = this;
      if (val) {
        _this.valNumer = _this.samgrList.length;
      }
    }
  },
  computed: {
    addsub () {
      if (this.samgrList && this.samgrList.length > 2) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    // 新增方法
    addClick () {
      this.valNumer = this.valNumer + 1;
      let list = {
        id: `编号-${this.samgrList.length + 1}`,
        userlabel: this.userlabel,
        type: 'loss',
        size: this.size
      };
      this.samgrList.push(list);
    },
    // 删除新增的某行数据
    handleDelete (index, row) {
      this.samgrList.splice(index, 1);
      for (let i = index; i < this.samgrList.length; i++) {
        // 从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据
        this.samgrList[i].id = `编号-${Number(this.samgrList[i].id.split('-')[1]) - 1}`;
      }
    },
    // 提交
    subSlot () {
      let _this = this;
      let ary = [];
      _this.samgrList.map(item => {
        if (item.type === 'loss') {
          ary.push({
            userlabel: item.userlabel + item.id.substring(item.id.lastIndexOf('-'), item.id.length),
            loss: item.size,
            latency: null,
            jitter: null
          });
        }
        if (item.type === 'latency') {
          ary.push({
            userlabel: item.userlabel + item.id.substring(item.id.lastIndexOf('-'), item.id.length),
            loss: null,
            latency: item.size,
            jitter: null
          });
        }
        if (item.type === 'jitter') {
          ary.push({
            userlabel: item.userlabel + item.id.substring(item.id.lastIndexOf('-'), item.id.length),
            loss: null,
            latency: null,
            jitter: item.size
          });
        }
      });
      let valid = [];
      // 判断过滤
      for (let i = 0; i < ary.length; i++) {
        if (ary[i].userlabel.indexOf('undefined') === 0 || ary[i].userlabel.indexOf('-') === 0) {
          valid.push('标题不能为空！');
        }
        if (ary[i].loss !== null) {
          if (ary[i].loss === undefined || ary[i].loss < 1 || ary[i].loss > 80) {
            valid.push('丢包率，范围1-80');
          }
        }
        if (ary[i].latency !== null) {
          if (ary[i].latency === undefined || ary[i].latency < 1 || ary[i].latency > 400) {
            valid.push('时延，范围1-400');
          }
        }
        if (ary[i].jitter !== null) {
          if (ary[i].jitter === undefined || ary[i].jitter < 1 || ary[i].jitter > 100) {
            valid.push('抖动，范围1-100');
          }
        }
      }
      if (valid.length === 0) {
        let params = {
          neId: _this.tunnelInfo.extAttrs.cpeNeId,
          tunnelId: _this.tunnelInfo.id,
          description: null,
          samgrList: ary
        };
        _this.$http.post({
          url: '/api/sdwan/policy/create',
          data: params
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.cancel();
            _this.$message.success('设置成功！');
            _this.$parent.refresh();
          }
        });
      } else {
        _this.$message.error(valid[0]);
      }
    },
    // 取消关闭
    cancel () {
      let _this = this;
      _this.$emit('changeStr', false);
    }
  }
};
</script>
<style lang="scss" scoped>
// 隧道策略设置
.dialogbg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(55, 55, 55, 0.6);
  height: 100%;
  z-index: 1010;
  overflow: auto;
  .dialogbox {
    width: 800px;
    margin: 0 auto;
    position: relative;
    outline: 0;
    top: 15%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    .boxmain {
      -webkit-overflow-scrolling: touch;
      top: 150px;
      left: 0;
      margin: 0;
      padding: 0;
      background-color: #fff;
      -webkit-background-clip: content;
      border-radius: 2px;
      box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
      .box-title {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        line-height: 24px;
        font-size: 18px;
        color: #303133;
        overflow: hidden;
        background-color: #fff;
        border-radius: 5px 5px 0 0;
        label {
          display: inline-block;
          font-size: 16px;
          position: absolute;
          top: 16px;
          right: 20px;
          i {
            cursor: pointer;
          }
          &:hover {
            color: #409eff;
          }
        }
      }
      .box-content {
        padding: 20px;
        line-height: 24px;
        font-size: 14px;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .box-footer {
        padding: 15px 20px;
        border-top: 1px solid #f0f0f0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
@media screen and (max-width: $device-ipad) {
  .dialogbg {
    .dialogbox {
      width: auto;
      margin: 0 5%;
    }
  }
}
.str_table {
  width: 100%;
  margin-bottom: 10px;
  ::v-deep th {
    color: #333;
    font-size: 14px;
    font-weight: normal;
    border-color: #ebeef5;
    background: #f8f8f9;
    padding: 6px 0;
    text-align: center;
  }
}
</style>